<template>
	<view class="container">
		<!-- 主页 -->
		<!-- <view class="site">
      <van-cell :title="shop.length == 0? '获取定位失败！请选择门店 ~':shop.deptName" icon="location-o" is-link
        url="/pages/shop/list" />
    </view> -->

		<!-- 我的宠物 -->
		<view class="my_pet" v-if="getRecordItem.length != 0">


			<!-- <van-tabs animated swipeable :active="Myactive" @change="onChangeMyactive">
				<van-tab :title="item.productName" v-for="(item,i) in getRecordItem" :key="i">
					<view class="my_pet_b">
						<view class="my_pet_box" @click="navTo('/subpkg/ldentity/ldentity?id=' + item.id)">
							<view class="my_pet_box_img">
								<image v-if="item.previewImage" class="my_pet_box_image" :src="item.previewImage"
									mode="aspectFill">
								</image>
								<image v-else
									src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/a1b0aedabc466612a506a75eda513e72.png"
									mode="aspectFill" class="my_pet_box_image">
								</image>
								<view class="my_pet_box_title">
									<view class="my_pet_box_title_top">
										<h1>{{item.productName}}</h1>
										<image v-if="item.sex === '0'" src="/static/images/mine/nan.png"
											mode="aspectFill"></image>
										<image v-else src="/static/images/mine/nv.png" mode="aspectFill"></image>
									</view>
									<view class="my_pet_box_title_bottom">
										<text>{{item.ageStr?item.ageStr : '未知'}}</text><text>｜</text><text>{{item.category.categoryName?item.category.categoryName : '未知'}}</text>
									</view>
								</view>
							</view>
							<van-icon name="arrow" />
							<view class="identity">
								<image
									src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/0c471072f0dcfcc06f7cfbe23f05cce7.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</van-tab>
			</van-tabs> -->
		</view>

		<!-- 三按钮 -->
		<!-- <view class="threeBox">
			<view @click="navTo('/subpkg/tickets_list/tickets_list')">
				<image src="/static/tabbar/purchase.png" mode="aspectFill"></image>
			</view>
			<view @click="navTo('/subpkg/marketing/giftcard/index')">
				<image src="/static/tabbar/queue.png" mode="aspectFill"></image>
			</view>
			<view @click="navTo('/subpkg/member/member-code')">
				<image src="/static/tabbar/recommend.png" mode="aspectFill"></image>
			</view>
		</view> -->

		<swiper class="activity" autoplay :interval="3000" circular>
			<swiper-item v-for="(item,i) in bannerList" :key="i">
				<view class="activityBanner" @click="navTo(item.link)">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="nav-wrapper uni-flex uni-row">

			<view class="nav-item uni-flex" style="justify-content: center; align-items: center;"
				@click="navTo('/subpkg/tickets_list/tickets_list')">
				<view style="width: 302rpx;
			height: 402rpx;">
					<image
						src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/8dbb477585ce1fbfbdce5b9e99532ed1.png"
						class="uni-image"></image>
				</view>
			</view>
			<view class="uni-flex uni-column" style="flex: 1 1 0%; justify-content: space-between;">
				<view class="nav-item" style="width: 396rpx;
height: 196rpx; " @click="navTo('/subpkg/marketing/giftcard/index')">
					<image
						src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/7aace68369de163cf52cd15b69ece9a3.png"
						class="uni-image"></image>
				</view>
				<view class="uni-flex uni-row">
					<view class="nav-item" style="flex: 1 1 0%; width: 183rpx;
height: 196rpx;" @click="navTo('/subpkg/invite/index')">
						<image
							src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/89fcc7f09032f6b5185d5ba2c106f336.png"
							class="uni-image"></image>
					</view>
					<view class="nav-item" style="flex: 1 1 0%; width: 183rpx;
height: 196rpx;" @click="navTo('/subpkg/allactivity/allactivity')">
						<image
							src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/5fc4f2477bc5d6af3ef3aac8070cae38.png"
							class="uni-image"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- /subpkg/member/member-code -->
		<view class="member-code" @click="navTo('/subpkg/member/member-code')">
			<image
				src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/8b91beab9024c3961e1fb26f3e2c5fdd.png"
				class="uni-image"></image>
		</view>

		<view class="headerTitle">
			<tui-list-view hover="false" unlined="all" title="店内宠物" size="36" color="#333" v-if="shop.length == 0">
				<tui-list-cell hover="false" color="#919293" size="28">可查看详细宠物信息</tui-list-cell>
				<view class="headerTitle_img"></view>
			</tui-list-view>

			<tui-list-view hover="false" unlined="all" :title="shop.deptName" size="36" color="#333" v-else>
				<tui-list-cell hover="false" color="#919293" size="28">{{shop.addressDetail + shop.placeName}}
				</tui-list-cell>
				<view class="headerTitle_img"></view>
			</tui-list-view>

		</view>

		<view class="no_Pet_record" v-if="storePetList.length == 0">
			<image src="/static/images/mine/nopey.png" mode="widthFix"></image>
			<view class="no_Pet_record_text">
				快点去<text style="color: #FDD338;">右上角定位门店</text>，就能看到萌萌哒的宠物啦
			</view>
		</view>

		<view class="storePet">
			<view class="mystorePet">
				<block v-for="(item1,i1) in storePetItem" :key="i1">
					<view hover-class="none" class="Pet_box"
						@click="navTo('/subpkg/particulars/particulars?id=' + item1.id)">
						<view class="Pet_box_img">
							<image :src="item1.previewImage" mode="aspectFill"></image>
						</view>

						<view class="Pet_box_body">
							<h1>{{item1.productName}}</h1>
							<view class="Pet_box_body_all">
								<image v-if="item1.sex === '0'" src="@/static/images/mine/nan.png"></image>
								<image v-else src="@/static/images/mine/nv.png"></image>
								<text>{{item1.category.categoryName}}</text>
							</view>
							<view user-select class="Pet_box_body_text">{{item1.remarks?item1.remarks:'欢迎来到奇宠日记 ~'}}
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="activity_popup">
			<tui-popup :duration="500" :show="popupShow" :styles="popupStyles" @click="popupShow = false">
				<view class="activity_Box" @click="activityBoxClick">
					<image :src="activityItem.img" mode="aspectFill"></image>
				</view>
			</tui-popup>

		</view>
	</view>
</template>

<script>
	import {
		getList
	} from "@/api/shop";
	import {
		homepartidetail
	} from '@/api/activity.js'
	import {
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		storePetclassify
	} from '@/api/home.js'
	import {
		RecordUserId
	} from '@/api/user.js'
	export default {
		data() {
			return {
				tabs: ['主页', '视频', '小视频', '相册'],
				currentTab: 0,
				popupShow: false,
				popupStyles: {
					position: 'fixed',
					bottom: 0,
					top: 0,
					left: 0,
					right: 0,
					/* #ifndef APP-NVUE */
					display: 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'backgroundColor': 'rgba(0,0,0,0.4)'
				},

				bannerList: [],
				lat: '',
				lng: '',
				shop: [],
				// 宠物列表
				storePetList: [],
				storePetItem: [],
				storePetcurrent: 1,
				// 活动列表
				activityList: [],
				Myactive: 0,
				storePetactive: 0,

				// 弹框活动
				activityItem: [],

				// 获取位置
				flagShow: true
			};
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage: function() {
			return {
				title: "奇宠日记",
				path: '/pages/tabbar/index/index?userId=' + this.userInfo.id,
				imageUrl: "http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210601/052c25046bc793e990817ac48ba9ffa5.jpg"
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			return {
				title: "奇宠日记",
				path: '/pages/tabbar/index/index?userId=' + this.userInfo.id,
				imageUrl: "http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210601/052c25046bc793e990817ac48ba9ffa5.jpg"
			};
		},
		// #endif
		computed: {
			...mapGetters('m_user', ['currentStoreId', 'isLogin', 'userInfo']),
			...mapGetters('m_pet', ['getRecordItem'])
		},
		onLoad() {
			let that = this;

			if (this.flagShow) {
				that.getCurrentLocation().then(loc => {
					// console.log(loc);
					that.lat = loc.latitude;
					that.lng = loc.longitude;
					this.setCurrentLocation(loc)
					that.getStores();
				});
			}
			// 获取店内宠物分类
			this.storePet()

			this.$eventHub.$on('emit', (data) => {
				this.flagShow = false
				this.shop = data
				this.setCurrentStoreId(this.shop.id);
				this.setCurrentStore(this.shop);
				this.storePetcurrent = 1
				this.storePetItem = []
				// 获取店内宠物分类
				this.storePet(this.currentStoreId)
			});
		},
		onReachBottom() {
			// console.log('222')
			if (this.storePetcurrent * 10 >= this.storePetList.total) return
			this.storePetcurrent++
			// 获取店内宠物分类
			this.storePet()
		},
		onHide() {
			this.popupShow = false
			// console.log(123)
		},
		methods: {
			...mapActions('m_user', ['getCurrentLocation']),
			...mapMutations('m_user', ['setCurrentStoreId', 'setCurrentStore', 'setCurrentLocation']),
			...mapMutations('m_shop', ['getStoresshop']),
			...mapActions('m_pet', ['GetRecordItem']),
			change(e) {
				this.currentTab = e.index
			},
			getStores() {
				let that = this;
				getList(that.lat, that.lng).then(res => {
					// console.log(res.data);
					that.shop = res.data[0];
					// console.log(that.shop)
					this.getStoresshop(res.data)
					that.setCurrentStoreId(that.shop.id);
					that.setCurrentStore(that.shop);

					//获取广告
					homepartidetail(0, this.currentStoreId).then(res => {
						this.bannerList = res.data
					})
					// 获取活动信息
					this.Activitybounced()
					// 获取店内宠物分类
					this.storePet()
				}).catch(err => {
					// 获取店内宠物分类
					this.storePet()
				});
			},
			// 获取店内宠物分类
			storePet() {
				const queryType = {
					shopId: this.currentStoreId ? this.currentStoreId : -1,
					current: this.storePetcurrent
				}
				storePetclassify(queryType).then(res => {
					// console.log(res.data)
					this.storePetList = res.data
					if (queryType.shopId != -1 && queryType.current == 1) {
						return this.storePetItem = res.data.records
					}
					this.storePetItem = [...this.storePetItem, ...res.data.records]
				}).catch(err => err)
			},
			onChangeMyactive(e) {

				this.Myactive = e.detail.index
			},
			onstoreChange(e) {
				this.storePetactive = e.detail.index
			},
			// 获取活动信息
			Activitybounced() {
				homepartidetail(2, this.currentStoreId).then(res => {
					// console.log(res)
					if (res.data.length != 0) {
						this.activityItem = res.data[0]
						if (this.activityItem.length != 0) {
							this.popupShow = true
						} else {
							this.popupShow = false
						}
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			activityBoxClick() {
				uni.report('ClicktheActivityBox', '点击活动弹框');
				this.navTo(this.activityItem.link)
			}
		},
	}
</script>

<style lang="scss">
	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	.my_pet {
		// padding: 20rpx 24rpx;

		/deep/ .van-tab {
			flex: none !important;
			-webkit-flex: none !important;
		}

		/deep/ .van-tabs__nav {
			padding: 20rpx 24rpx !important;
		}

		/deep/ .van-tabs__line {
			display: none;
		}

		/deep/ .van-tab--active {
			font-size: 36rpx !important;
			font-weight: bold !important;
		}

		/deep/ .van-tabs__nav {
			display: flex;
			align-items: center;
		}

		/deep/ .van-ellipsis {
			margin-right: 20rpx;
		}

		/deep/ .van-hairline--top-bottom:after {
			border: none !important;
		}

		/deep/ .van-tabs__content {
			overflow: visible !important;
		}

		.my_pet_b {
			padding: 20rpx 24rpx 15rpx;

			.my_pet_box {
				position: relative;
				height: 278rpx;
				margin-top: 20rpx;
				background-color: #ffff;
				border-radius: 20rpx;
				padding: 0 47rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.08);

				.my_pet_box_img {
					display: flex;
					align-items: center;

					.my_pet_box_title {
						height: 134rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin-left: 18rpx;

						.my_pet_box_title_top {
							display: flex;
							align-items: center;

							h1 {
								font-size: 48rpx;
							}

							image {
								width: 40rpx;
								height: 40rpx;
								margin-left: 13rpx;
							}
						}

						.my_pet_box_title_bottom {
							text {
								color: rgba(61, 61, 61, 0.5);
								font-size: 32rpx;
							}
						}
					}

					.my_pet_box_image {
						width: 136rpx;
						height: 136rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}

				.identity {
					position: absolute;
					top: 0;
					left: 0;
					width: 203rpx;
					height: 52rpx;
					background: linear-gradient(180deg, rgba(253, 211, 56, 1) 0%, rgba(255, 227, 128, 1) 100%);
					border-top-left-radius: 20rpx;
					border-top-right-radius: 0px;
					border-bottom-right-radius: 20rpx;
					border-bottom-left-radius: 0px;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 167rpx;
						height: 34rpx;
					}
				}
			}
		}
	}

	.headerTitle_img {
		position: absolute;
		left: 60rpx;
		top: 0rpx;
		z-index: 0;
		width: 85rpx;
		height: 8rpx;
		background-color: rgba(253, 211, 56, 1);
		border-radius: 207rpx;
	}

	.no_Pet_record {
		display: flex;
		height: 700rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 120rpx;
			height: 181rpx;
		}

		.no_Pet_record_text {
			width: 360rpx;
			height: 112rpx;
			font-size: 30rpx;
			text-align: center;
			color: rgba(197, 197, 197, 0.7);
			line-height: 60rpx;
			margin-top: 20rpx;
		}
	}

	.Pet_record {
		margin: 10px 0 20px;
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: center;

		.Pet_record_box {
			position: relative;
			// z-index: 10;
			width: 702rpx;
			height: 412rpx;
			background-color: #fff;
			box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.08);
			border-radius: 10px;
			// overflow: hidden;

			.Pet_record_header {
				position: relative;
				z-index: 10;
				height: 107rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 38rpx;
				font-size: 36rpx;
				border-bottom: 1px solid #f8f8f8;
				// background-color: #fff;

				h1 {
					font-weight: bold;
				}

				navigator {
					font-size: 28rpx;
					color: rgba(61, 61, 61, 0.5);
				}
			}

			.Pet_record_body {
				height: 296rpx;
				padding: 0 38rpx;
				display: flex;
				align-items: center;

				.Pet_record_body_scroll {
					white-space: nowrap;
					height: 217rpx;
					// display: flex;
				}

				.Pet_record_body_box:last-child {
					margin-right: 0 !important;
				}

				.Pet_record_body_box {
					// float: left;
					height: 217rpx;
					width: 162rpx;
					// background-color: orange;
					position: relative;
					margin-right: 26rpx;
					display: inline-block;
					text-align: center;

					.imageMax {
						width: 162rpx;
						height: 162rpx;
						border-radius: 10px;
						overflow: hidden;


					}

					.imageMin {
						position: absolute;
						right: 0;
						bottom: 54rpx;
						width: 40rpx;
						height: 40rpx;
						border: 1px solid #fff;
						border-radius: 50%;
					}

					.Pet_record_body_scroll_h1 {
						margin-top: 10rpx;
						font-size: 28rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.Pet_record_abso {
				position: absolute;
				right: 35rpx;
				top: -114rpx;
				z-index: -1;

				image {
					width: 132rpx;
					height: 156rpx;
				}
			}
		}
	}

	.storePet {}

	.mystorePet {
		padding-left: 24rpx !important;
		padding-right: 24rpx !important;
		padding-bottom: 24rpx !important;
		// margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.Pet_box {
			width: 338rpx;
			// height: 472rpx;
			padding-bottom: 30rpx;
			box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.08);
			border-radius: 10px;
			margin-top: 29rpx;
			overflow: hidden;

			.Pet_box_img {
				width: 338rpx;
				height: 322rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.Pet_box_body {
				padding: 20rpx 30rpx 0;

				h1 {
					font-size: 32rpx;
				}

				.Pet_box_body_all {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					margin: 15rpx 0;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 5px;
					}

					text {
						color: rgba(61, 61, 61, 0.75);
					}
				}

				.Pet_box_body_text {
					font-size: 24rpx;
					letter-spacing: 1rpx;
					line-height: 40rpx;
					color: rgba(61, 61, 61, 0.5);
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;

				}
			}
		}
	}

	.activity_popup {

		.activity_Box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 520rpx;
			height: 548rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


		.activity_popup_title {}

		.activity_popup_content {}
	}

	.nav-wrapper {
		padding: 0 18rpx;
		margin-top: 16rpx;
	}

	.nav-item {
		margin: 7rpx 6rpx;
	}

	.uni-flex {
		display: -webkit-box;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
	}

	.uni-row {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
	}

	.uni-column {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
	}

	.uni-image {
		width: 100%;
		height: 100%;
		display: inline-block;
		overflow: hidden;
		position: relative;
	}

	.member-code {
		height: 196rpx;
		margin: 16rpx 0;
		padding: 0 24rpx;
	}

	.activity {
		margin-top: 30rpx;
		height: 345rpx;
		padding-bottom: 10rpx;
	}

	// 活动海报
	.activityBanner {
		padding: 0 24rpx;
		/* overflow: hidden; */
		height: 100%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
</style>
